import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import {fontSize_16} from "./theme";
import {
    aboutSvgXml_Mine,
    addressBookSvgXml_Mine,
    bellSvgXml, bookSvgXml_Mine,
    coinSvgXml_Mine, giftSvgXml_Mine,
    recordSvgXml_Mine,
    rightSvgXml, setupSvgXml_Mine,
    walletSvgXml_Mine
} from "../libs/svgXml";
import {SvgXml} from "react-native-svg";

const {width, height, scale} = Dimensions.get("window");

const L2_Mine = ({navigation}: any) => {
    const [MineListItem, setMineListItem] = useState([
        {
            leftSvg:coinSvgXml_Mine,
            title:"资产总览",
            onPress:()=>{
                console.log(1)
            },
        },
        {
            leftSvg:walletSvgXml_Mine,
            title:"管理钱包",
            onPress:()=>{
                console.log(2)
            },
        },
        {
            dividerBottom:true,
            leftSvg:recordSvgXml_Mine,
            title:"交易记录",
            onPress:()=>{
                console.log(3)
            },
        },
        {
            dividerBottom:true,
            leftSvg:addressBookSvgXml_Mine,
            title:"地址簿",
            onPress:()=>{
               navigation.navigate("L2_AddressBookView",{from:"mine"})
            },
        },
        {
            dividerBottom:false,
            leftSvg:giftSvgXml_Mine,
            title:"邀请好友",
            onPress:()=>{
                console.log(5)
            },
        },
        {
            dividerBottom:false,
            leftSvg:bookSvgXml_Mine,
            title:"钱包指引",
            onPress:()=>{
                console.log(5)
            },
        },
        {
            dividerBottom:false,
            leftSvg:aboutSvgXml_Mine,
            title:"关于我们",
            onPress:()=>{
                console.log(5)
            },
        },
        {
            dividerBottom:false,
            leftSvg:setupSvgXml_Mine,
            title:"系统设置",
            onPress:()=>{
                console.log(5)
            },
        },
    ]);

    useEffect(() => {


    }, [])


    return (
        <View style={styles.container}>
            <View style={styles.headerContainer}>
                <Text style={styles.headerTitle}>我的</Text>
                <SvgXml xml={bellSvgXml} width={25} height={25} style={styles.headerRightIcon}/>
            </View>
            {
                MineListItem.map((item,index)=>{
                    return (
                        <TouchableHighlight underlayColor={"grey"} onPress={item.onPress} key={index+"_MineList"}>
                            <View style={item.dividerBottom?styles.listItem_dividerBottom:styles.pageView}>
                                <SvgXml xml={item.leftSvg} width={25} height={25} style={{borderBottomWidth:1,borderBottomColor:"transparent"}}/>
                                <View style={{flex:1,height:50,marginLeft:10,alignItems:"center",flexDirection:"row",borderBottomColor:"#f5f5f5",borderBottomWidth:1}}>
                                    <Text style={{flex:1,fontSize:fontSize_16}}>{item.title}</Text>
                                    <SvgXml xml={rightSvgXml()} width={25} height={25}/>
                                </View>
                            </View>
                        </TouchableHighlight>
                    )
                })
            }


        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width:width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor:"white"
    },
    headerContainer:{
        width:width,
        height:50,
        backgroundColor:"white",
        borderBottomWidth:10,
        borderBottomColor:"#f6f6f6",
        flexDirection:"row",
        paddingLeft:10,
        paddingRight:10
    },
    headerTitle:{
        flex:1,
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"white",
        textAlign:"center",
        textAlignVertical:"center",
        fontSize:fontSize_16,
        color:"black",
    },
    headerRightIcon:{
        position:"absolute",
        right:10,
        backgroundColor:"white",
        top:"50%",
        transform:[{translateY:-12.5}],
    },
    pageView:{
        width:width,
        height:55,
        backgroundColor:"white",
        flexDirection:"row",
        alignItems:"center",
        paddingLeft:10,
        paddingRight:10,
    },
    listItem_dividerBottom:{
        width:width,
        height:55,
        backgroundColor:"white",
        flexDirection:"row",
        alignItems:"center",
        paddingLeft:10,
        paddingRight:10,
        borderBottomWidth:10,
        borderBottomColor:"#f6f6f6",
    }
})

export default L2_Mine;


